<script setup lang="ts">
	import { BucketCDN } from '@/stores/constant'

	const imgs = [
		"carousel-0.jpg",
		"carousel-1.jpg",
		"carousel-2.jpg",
		"bg-light.jpg",
	]
</script>

<template>
	<view class="home-top-log">
		<swiper class="swiper" indicator-dots indicator-color="#fff9" indicator-active-color="#fff" autoplay circular>
			<swiper-item v-for="i in imgs" :key="i">
				<image :src="`${BucketCDN}web-files/${i}`" mode="aspectFill" />
			</swiper-item>
		</swiper>
		<view class="title">✨多元记APP 全新亮相 ~ </view>
	</view>
</template>

<style scoped lang="scss">
	.home-top-log {
		& {
			width: 100%;
			overflow: hidden;
			position: relative;
		}

		swiper {
			&-item {
				padding: 0 $gap;

				image {
					border-radius: $border-radius;
					width: 100%;
					height: 100%;
				}
			}
		}

		.title {
			position: absolute;
			left: 64rpx;
			bottom: 48rpx;
			
			padding: 10rpx 24rpx;
			border-radius: 12rpx;
			backdrop-filter: blur(16px);
		}

	}
</style>